<template>
	<div class="user">
		<div class="div1">
			<div class="img">
				<aside>
					<img :src="`${this.$ip}/api/public/showimg/${$store.state.img}`"/>
				</aside>
					<span>{{$store.state.name}}</span>
			</div>
			<el-menu default-active="2" class="el-menu-vertical-demo" 
			@open="handleOpen" @close="handleClose">
			<router-link to="/user/updatepwd">
				<el-menu-item index="1">
					<span slot="title">密码修改</span>
				</el-menu-item>
			</router-link>
			<router-link to="/user/updatepic">
				<el-menu-item index="2">
					<span slot="title">个人头像修改</span>
				</el-menu-item>
			</router-link>
			<router-link to="/user/updateaddr">
				<el-menu-item index="3">
					<span slot="title">个人信息修改</span>
				</el-menu-item>
			</router-link>
				<el-menu-item index="4">
					<span slot="title">我的评论</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="div2">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
export default {
	name:'UserMain',
	data(){
		return{
		
		}
	},
	methods:{
		 handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		      },
		      handleClose(key, keyPath) {
		        console.log(key, keyPath);
		      }
	},
	mounted(){
		
	}
}
</script>

<style scoped>
a{
	color: black;
}
.user{
	width: 78%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
}
.user .div1{
	width: 15%;
	height: 90vh;
	background-color: white;
	border: 1px solid #e8e8e8;
}
.user .div1 .img{
	height: 110px;
	background-color: #e8e8e8;
}
.user .div1 .img span{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.user .div1 .img aside{
	width: 60px;
	height: 60px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.user .div1 .img img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin-top: 10px;
}
.user .div2{
	width: 80%;
}
</style>
